baubs git - /page/blob.mu

Micron Document

baubs git

Node / mirrors / respira / files / src / components / ProgressMonitor.tsx

Displaying Raw • Download

src/components/ProgressMonitor.tsx conversion-worker (0dfc8b73) Text, 19.29 KB

import { useRef, useEffect, useState, useMemo } from "react";

import { useShallow } from 'zustand/react/shallow';

import { useMachineStore } from '../stores/useMachineStore';

import { usePatternStore } from '../stores/usePatternStore';

import {

CheckCircleIcon,

ArrowRightIcon,

CircleStackIcon,

PlayIcon,

CheckBadgeIcon,

ClockIcon,

PauseCircleIcon,

ExclamationCircleIcon,

ChartBarIcon,

ArrowPathIcon,

} from "@heroicons/react/24/solid";

import { MachineStatus } from "../types/machine";

import {

canStartSewing,

canStartMaskTrace,

canResumeSewing,

getStateVisualInfo,

} from "../utils/machineStateHelpers";

export function ProgressMonitor() {

// Machine store

const {

machineStatus,

patternInfo,

sewingProgress,

isDeleting,

startMaskTrace,

startSewing,

resumeSewing,

} = useMachineStore(

useShallow((state) => ({

machineStatus: state.machineStatus,

patternInfo: state.patternInfo,

sewingProgress: state.sewingProgress,

isDeleting: state.isDeleting,

startMaskTrace: state.startMaskTrace,

startSewing: state.startSewing,

resumeSewing: state.resumeSewing,

}))

);

// Pattern store

const pesData = usePatternStore((state) => state.pesData);

const currentBlockRef = useRef<HTMLDivElement>(null);

const colorBlocksScrollRef = useRef<HTMLDivElement>(null);

const [showGradient, setShowGradient] = useState(true);

// State indicators

const isMaskTraceComplete =

machineStatus === MachineStatus.MASK_TRACE_COMPLETE;

const stateVisual = getStateVisualInfo(machineStatus);

const progressPercent = patternInfo

? ((sewingProgress?.currentStitch || 0) / patternInfo.totalStitches) * 100

: 0;

// Calculate color block information from pesData

const colorBlocks = useMemo(() => {

if (!pesData) return [];

const blocks: Array<{

colorIndex: number;

threadHex: string;

startStitch: number;

endStitch: number;

stitchCount: number;

threadCatalogNumber: string | null;

threadBrand: string | null;

threadDescription: string | null;

threadChart: string | null;

}> = [];

let currentColorIndex = pesData.stitches[0]?.[3] ?? 0;

let blockStartStitch = 0;

for (let i = 0; i < pesData.stitches.length; i++) {

const stitchColorIndex = pesData.stitches[i][3];

// When color changes, save the previous block

if (

stitchColorIndex !== currentColorIndex ||

i === pesData.stitches.length - 1

) {

const endStitch = i === pesData.stitches.length - 1 ? i + 1 : i;

const thread = pesData.threads[currentColorIndex];

blocks.push({

colorIndex: currentColorIndex,

threadHex: thread?.hex || "#000000",

threadCatalogNumber: thread?.catalogNumber ?? null,

threadBrand: thread?.brand ?? null,

threadDescription: thread?.description ?? null,

threadChart: thread?.chart ?? null,

startStitch: blockStartStitch,

endStitch: endStitch,

stitchCount: endStitch - blockStartStitch,

});

currentColorIndex = stitchColorIndex;

blockStartStitch = i;

}

return blocks;

}, [pesData]);

// Determine current color block based on current stitch

const currentStitch = sewingProgress?.currentStitch || 0;

const currentBlockIndex = colorBlocks.findIndex(

(block) =>

currentStitch >= block.startStitch && currentStitch < block.endStitch,

);

// Auto-scroll to current block

useEffect(() => {

if (currentBlockRef.current) {

currentBlockRef.current.scrollIntoView({

behavior: "smooth",

block: "nearest",

});

}

}, [currentBlockIndex]);

// Handle scroll to detect if at bottom

const handleColorBlocksScroll = () => {

if (colorBlocksScrollRef.current) {

const { scrollTop, scrollHeight, clientHeight } = colorBlocksScrollRef.current;

const isAtBottom = scrollTop + clientHeight >= scrollHeight - 5; // 5px threshold

setShowGradient(!isAtBottom);

}

};

// Check initial scroll state and update on resize

useEffect(() => {

const checkScrollable = () => {

if (colorBlocksScrollRef.current) {

const { scrollHeight, clientHeight } = colorBlocksScrollRef.current;

const isScrollable = scrollHeight > clientHeight;

setShowGradient(isScrollable);

}

};

checkScrollable();

window.addEventListener('resize', checkScrollable);

return () => window.removeEventListener('resize', checkScrollable);

}, [colorBlocks]);

const stateIndicatorColors = {

idle: "bg-blue-50 dark:bg-blue-900/20 border-blue-600",

info: "bg-blue-50 dark:bg-blue-900/20 border-blue-600",

active: "bg-yellow-50 dark:bg-yellow-900/20 border-yellow-500",

waiting: "bg-yellow-50 dark:bg-yellow-900/20 border-yellow-500",

warning: "bg-yellow-50 dark:bg-yellow-900/20 border-yellow-500",

complete: "bg-green-50 dark:bg-green-900/20 border-green-600",

success: "bg-green-50 dark:bg-green-900/20 border-green-600",

interrupted: "bg-red-50 dark:bg-red-900/20 border-red-600",

error: "bg-red-50 dark:bg-red-900/20 border-red-600",

danger: "bg-red-50 dark:bg-red-900/20 border-red-600",

};

return (

Sewing Progress

</h3>

{sewingProgress && (

{progressPercent.toFixed(1)}% complete

</p>

)}

</div>

{/* Pattern Info */}

{patternInfo && (

Total Stitches

</span>

{patternInfo.totalStitches.toLocaleString()}

</span>

</div>

Est. Time

</span>

{Math.floor(patternInfo.totalTime / 60)}:

{String(patternInfo.totalTime % 60).padStart(2, "0")}

</span>

</div>

Speed

</span>

{patternInfo.speed} spm

</span>

</div>

)}

{/* Progress Bar */}

{sewingProgress && (

<div

className="h-full bg-gradient-to-r from-purple-600 to-purple-700 dark:from-purple-600 dark:to-purple-800 transition-all duration-300 ease-out relative overflow-hidden after:absolute after:inset-0 after:bg-gradient-to-r after:from-transparent after:via-white/30 after:to-transparent after:animate-[shimmer_2s_infinite]"

style={{ width: \\`${progressPercent}%\\` }}

</div>

Current Stitch

</span>

{sewingProgress.currentStitch.toLocaleString()} /{" "}

{patternInfo?.totalStitches.toLocaleString() || 0}

</span>

</div>

Time Elapsed

</span>

{Math.floor(sewingProgress.currentTime / 60)}:

{String(sewingProgress.currentTime % 60).padStart(2, "0")}

</span>

</div>

)}

{/* State Visual Indicator */}

{patternInfo &&

(() => {

const iconMap = {

ready: (

active: (

waiting: (

complete: (

interrupted: (

error: (

};

return (

<div

className={\\`flex items-center gap-3 p-2.5 rounded-lg mb-3 border-l-4 ${stateIndicatorColors[stateVisual.color as keyof typeof stateIndicatorColors] || stateIndicatorColors.info}\\`}

{iconMap[stateVisual.iconName]}

</div>

{stateVisual.label}

</div>

{stateVisual.description}

</div>

);

})()}

{/* Color Blocks */}

{colorBlocks.length > 0 && (

Color Blocks

</h4>

<div

ref={colorBlocksScrollRef}

onScroll={handleColorBlocksScroll}

className="lg:absolute lg:inset-0 flex flex-col gap-2 lg:overflow-y-auto scroll-smooth pr-1 [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar-track]:bg-gray-100 dark:[&::-webkit-scrollbar-track]:bg-gray-700 [&::-webkit-scrollbar-thumb]:bg-blue-600 dark:[&::-webkit-scrollbar-thumb]:bg-blue-500 [&::-webkit-scrollbar-thumb]:rounded-full"

{colorBlocks.map((block, index) => {

const isCompleted = currentStitch >= block.endStitch;

const isCurrent = index === currentBlockIndex;

// Calculate progress within current block

let blockProgress = 0;

if (isCurrent) {

blockProgress =

((currentStitch - block.startStitch) / block.stitchCount) *

100;

} else if (isCompleted) {

blockProgress = 100;

}

return (

<div

key={index}

ref={isCurrent ? currentBlockRef : null}

className={\\`p-2.5 rounded-lg border-2 transition-all duration-300 ${

isCompleted

? "border-green-600 bg-green-50 dark:bg-green-900/20"

: isCurrent

? "border-purple-600 bg-purple-50 dark:bg-purple-900/20 shadow-lg shadow-purple-600/20 animate-pulseGlow"

: "border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-800/50 opacity-70"

}\\`}

role="listitem"

aria-label={\\`Thread ${block.colorIndex + 1}, ${block.stitchCount} stitches, ${isCompleted ? "completed" : isCurrent ? "in progress" : "pending"}\\`}

{/* Color swatch */}

<div

className="w-7 h-7 rounded-lg border-2 border-gray-300 dark:border-gray-600 shadow-md flex-shrink-0"

style={{

backgroundColor: block.threadHex,

...(isCurrent && { borderColor: "#9333ea" }),

}}

title={\\`Thread color: ${block.threadHex}\\`}

aria-label={\\`Thread color ${block.threadHex}\\`}

{/* Thread info */}

Thread {block.colorIndex + 1}

{(block.threadBrand || block.threadChart || block.threadDescription || block.threadCatalogNumber) && (

{" "}

(

{(() => {

// Primary metadata: brand and catalog number

const primaryMetadata = [

block.threadBrand,

block.threadCatalogNumber ? \\`#${block.threadCatalogNumber}\\` : null

].filter(Boolean).join(" ");

// Secondary metadata: chart and description

const secondaryMetadata = [

block.threadChart,

block.threadDescription

].filter(Boolean).join(" ");

return [primaryMetadata, secondaryMetadata].filter(Boolean).join(" • ");

})()}

)

</span>

)}

</div>

{block.stitchCount.toLocaleString()} stitches

</div>

{/* Status icon */}

{isCompleted ? (

<CheckCircleIcon

className="w-5 h-5 text-green-600 flex-shrink-0"

aria-label="Completed"

) : isCurrent ? (

<ArrowRightIcon

className="w-5 h-5 text-purple-600 flex-shrink-0 animate-pulse"

aria-label="In progress"

) : (

<CircleStackIcon

className="w-5 h-5 text-gray-400 flex-shrink-0"

aria-label="Pending"

)}

</div>

{/* Progress bar for current block */}

{isCurrent && (

<div

className="h-full bg-purple-600 dark:bg-purple-500 transition-all duration-300 rounded-full"

style={{ width: \\`${blockProgress}%\\` }}

role="progressbar"

aria-valuenow={Math.round(blockProgress)}

aria-valuemin={0}

aria-valuemax={100}

aria-label={\\`${Math.round(blockProgress)}% complete\\`}

</div>

)}

</div>

);

})}

</div>

{/* Gradient overlay to indicate more content below - only on desktop and when not at bottom */}

{showGradient && (

)}

</div>

)}

{/* Action buttons */}

{/* Resume has highest priority when available */}

{canResumeSewing(machineStatus) && (

<button

onClick={resumeSewing}

disabled={isDeleting}

className="flex-1 flex items-center justify-center gap-1.5 px-3 py-2.5 sm:py-2 bg-blue-600 dark:bg-blue-700 text-white rounded font-semibold text-xs hover:bg-blue-700 dark:hover:bg-blue-600 active:bg-blue-800 dark:active:bg-blue-500 transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"

aria-label="Resume sewing the current pattern"

Resume Sewing

</button>

)}

{/* Start Sewing - primary action, takes more space */}

{canStartSewing(machineStatus) && !canResumeSewing(machineStatus) && (

<button

onClick={startSewing}

disabled={isDeleting}

className="flex-[2] flex items-center justify-center gap-1.5 px-3 py-2.5 sm:py-2 bg-blue-600 dark:bg-blue-700 text-white rounded font-semibold text-xs hover:bg-blue-700 dark:hover:bg-blue-600 active:bg-blue-800 dark:active:bg-blue-500 transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"

aria-label="Start sewing the pattern"

Start Sewing

</button>

)}

{/* Start Mask Trace - secondary action */}

{canStartMaskTrace(machineStatus) && (

<button

onClick={startMaskTrace}

disabled={isDeleting}

className="flex-1 flex items-center justify-center gap-1.5 px-3 py-2.5 sm:py-2 bg-gray-600 dark:bg-gray-700 text-white rounded font-semibold text-xs hover:bg-gray-700 dark:hover:bg-gray-600 active:bg-gray-800 dark:active:bg-gray-500 transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"

aria-label={

isMaskTraceComplete

? "Start mask trace again"

: "Start mask trace"

}

{isMaskTraceComplete ? "Trace Again" : "Start Mask Trace"}

</button>

)}

</div>

);

}

Served by rngit 1.3.3 - Generated in 0.11s